<template>
  <div class="mod-config">
    <div v-if="!addOrUpdateVisible">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>

        <el-cascader
          v-model="optionsValue"
          :options="options"
          @active-item-change="handleItemChange"
          placeholder="分类路径"
          @change="optionsSelectHandle(true)"
          clearable
          @visible-change="optionsSelectHandle"
          :props=" {
          value: 'value',
          children: 'children'
        }"

        ></el-cascader>


        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="addBtnHandle()">管理员发布</el-button>
          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>

        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          width="200px"
          label="标题">
        </el-table-column>

        <el-table-column
          prop="userName"
          header-align="center"
          align="center"
          width="200px"
          label="发布用户">
        </el-table-column>

        <el-table-column
          prop="options"
          header-align="center"
          align="center"
          width="200px"
          label="话题路径">
          <template slot-scope="scope">
            <div>
              {{scope.row.options[0].name}}
              <br/>
              ↓
              <br/>

              {{scope.row.options[1].name}}
              <br/>
              ↓
              <br/>

              {{scope.row.options[2].name}}
            </div>

          </template>
        </el-table-column>

        <el-table-column
          prop="praiseCount"
          header-align="center"
          align="center"
          width="100px"
          label="点赞数">
        </el-table-column>

        <el-table-column
          prop="replyCount"
          header-align="center"
          align="center"
          width="100px"
          label="评论数">
        </el-table-column>

        <el-table-column
          prop="viewCount"
          header-align="center"
          align="center"
          width="100px"
          label="游览次数">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="copyright"-->
<!--          header-align="center"-->
<!--          align="center"-->
<!--          width="100px"-->
<!--          label="转载信息">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.copyright == 0" size="small" type="danger">不可转载</el-tag>-->
<!--            <el-tag v-else size="small">可转载</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          width="80px"
          label="状态">
          <template slot-scope="scope">
            <el-tag  v-if="scope.row.status == 0" size="small" type="danger">禁用</el-tag>
            <el-tag  v-else size="small">正常</el-tag>

            <el-tag v-if="scope.row.topicStatus.notice == 1" size="small">公告</el-tag>
            <el-tag v-if="scope.row.topicStatus.top == 1" size="small">置顶</el-tag>
            <el-tag v-if="scope.row.topicStatus.elite == 1" size="small">精华</el-tag>
            <el-tag v-if="scope.row.topicStatus.hot == 1" size="small">热门</el-tag>
            <el-tag v-if="scope.row.topicStatus.newly == 1" size="small">最新</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="180px"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          header-align="center"
          align="center"
          width="180px"
          label="修改时间">
        </el-table-column>
        <el-table-column
          prop="pass"
          header-align="center"
          align="center"
          width="120px"
          label="审核状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pass == 0" size="small" type="danger">未通过</el-tag>
            <el-tag v-if="scope.row.pass == 1" size="small" type="success">通过</el-tag>
            <el-tag v-if="scope.row.pass == 2" size="small" type="warning">审核中</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="100"
          label="操作">
          <template slot-scope="scope" >
            <el-button style="width: 100%" size="mini" type="info" round
                       @click="statusPage(scope.row.id)" :disabled="scope.row.topicStatus.notice == 1 || scope.row.pass != 1 || scope.row.status == 0" >状态修改</el-button>
            <el-button style="width: 100%;margin-left: 0" size="mini" type="primary" round @click="infoPageHandle(scope.row.id)">内容详情</el-button>
            <el-button style="width: 100%;margin-left: 0" size="mini" type="warning" round @click="addOrUpdateHandle(scope.row.id,scope.row.options)">修改</el-button>
            <el-button style="width: 100%;margin-left: 0" size="mini" type="danger" round @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
<!--    <div v-if="addOrUpdateVisible">-->
<!--      <add-or-update v-if="addOrUpdateVisible" :addOrUpdateVisible="addOrUpdateVisible"  ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
<!--    </div>-->




<!--    话题状态弹框-->
    <el-dialog title="话题状态" :visible.sync="statusPageVisible" width="500px">
      <el-form :model="statusForm" ref="statusForm" @keyup.enter.native="statusFormSubmit()" label-width="100px">
<!--        <el-form-item label="状态" prop="status">-->
<!--          <el-switch v-model="dataForm.status" active-value="1" inactive-value="0"-->
<!--                     active-color="#13ce66" inactive-color="#ff4949">-->
<!--          </el-switch>-->
<!--        </el-form-item>-->

        <el-form-item label="话题" >
<!--           :checked="statusForm.top === '1'
:checked="statusForm.hot === '1'
:checked="statusForm.newly === '1'
:checked="statusForm.elite === '1'-->

          <el-checkbox v-model="statusForm.top" false-label="0" true-label="1" label="">置顶</el-checkbox>
          <el-checkbox v-model="statusForm.hot" false-label="0" true-label="1" label="">热门</el-checkbox>
          <el-checkbox v-model="statusForm.newly" false-label="0" true-label="1" label="">最新</el-checkbox>
          <el-checkbox v-model="statusForm.elite" false-label="0" true-label="1" label="">精华</el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="statusPageVisible = false">取消</el-button>
      <el-button type="primary" @click="statusFormSubmit()">确定</el-button>
    </span>
    </el-dialog>

<!--    内容详情弹框-->
    <el-dialog
      title="内容详情"
      :visible.sync="contentPageVisible"
      :before-close="handleContentPageClose"
      width="60%">
      <div v-html="dialogContent"></div>
    </el-dialog>

  </div>
</template>

<script>
  import AddOrUpdate from './communitytopic-add-or-update'

  export default {
    data () {
      return {
        //话题状态表单
        statusForm:{

        },
        //条件查询表单
        dataForm: {
          key: ''
        },
        //数据列表
        dataList: [],
        //分页相关
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        //控制加载变量
        dataListLoading: false,
        //批量删除
        dataListSelections: [],
        //添加或修改弹窗控制
        addOrUpdateVisible: false,
        // infoPageVisible:false,
        //话题状态弹窗控制
        statusPageVisible:false,
        //内容详情弹窗控制
        contentPageVisible:false,
        //按钮禁用控制
        addButtonDisable:true,
        //三级联查动态查询列表
        options: [{
          id: '',
          name: '',
          children:[]
        }],
        //三级联查下拉框绑定值
        optionsValue:[],
        //话题三级联查
        optionsData:[{
          id:'',
          name:''
        },
          {},{}],
        //三级联查一级下标
        optionIndex1:'',
        //三级联查二级下标
        optionIndex2:'',
        //三级联查三级下标
        optionIndex3:'',
        //内容详情弹框数据
        dialogContent:'',

        //多条件查询
        queryObj: {
          pageParams: {
            page: 1,  //当前页
            limit:10,//每页记录数
            sidx: "sort",
            order: "",
          },
          and: {//放在and里面的都是 并且条件
            must:{communityCategory_id:'',community_id:'',topicCategory_id:''}, //精确匹配
          }
        }
      }
    },
    components: {
      AddOrUpdate,

    },
    activated () {
      this.getDataList()
    },
    mounted () {
      this.getCommunityCategoryWithOptions();
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/forum/communitytopic/multiConditList'),
          method: 'post',
          data: this.$http.adornParams(this.queryObj)
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount

          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        console.log(val)
        this.queryObj.pageParams.page = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id,options) {
        // this.addOrUpdateVisible = true
        // this.$nextTick(() => {
        //   this.$refs.addOrUpdate.init(id)
        // })

        //添加操作
        if (!id){
          this.createOptionsData()
          this.$router.push({name: 'communitytopic-add-or-update',params:{ id:id,optionsData:this.optionsData}});
        }else{
          this.$router.push({name: 'communitytopic-add-or-update',params:{ id:id,optionsData:options}});
        }

      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/forum/communitytopic/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      //内容详情打开弹框
      infoPageHandle(id){
        this.contentPageVisible = true
        this.$http({
          url: this.$http.adornUrl('/forum/communitytopic/content/'+ id),
          method: 'post',
        }).then(({data}) => {
          console.log(data)
          this.dialogContent = data.content
        })
      },
      //三级联查下拉框点击列表参数触发事件
      handleItemChange(val){
        //如果选择了三级分类 打开添加按钮
        if (this.optionsValue.length == 2){
          this.addButtonDisable = false
        }else {
          this.addButtonDisable = true
        }
        //如果是一级数据
        if (val.length == 1){
          this.options.forEach(item =>{
            if (item.value == val[0]){
              this.optionIndex1 = item.index
              return
            }
          })
          //获取二级分类数据
          this.getAllWithOptionsBycommunityCategoryId(val[0])
        }
        //如果是二级数据
        if (val.length == 2){
          this.options[this.optionIndex1].children.forEach(item =>{
            if (item.value == val[1]){
              this.optionIndex2 = item.index
              return
            }
          })
          //获取三级分类数据
          this.getAllWithOptionsByCommunityId(val[1])
        }

      },
      //获取一级数据
      getCommunityCategoryWithOptions(){
        this.$http({
          url: this.$http.adornUrl(`/forum/communitycategory/options`),
          method: 'get',
        }).then(({data}) => {
          this.options = data.data

        })
      },
      //获取二级数据
      getAllWithOptionsBycommunityCategoryId(communityCategoryId){
        this.$http({
          url: this.$http.adornUrl(`/forum/community/option/${communityCategoryId}`),
          method: 'get',
        }).then(({data}) => {
          this.options[this.optionIndex1].children = data.data
        })
      },
      //获取三级数据
      getAllWithOptionsByCommunityId(communityId){
        this.$http({
          url: this.$http.adornUrl(`/forum/communitytopiccategory/option/${communityId}`),
          method: 'get',
        }).then(({data}) => {
          this.options[this.optionIndex1].children[this.optionIndex2].children = data.data
        })
      },
      //话题状态打开弹框事件
      statusPage(id){
        this.statusPageVisible = true
        this.$http({
          url: this.$http.adornUrl(`/forum/communitytopic/statusInfo/${id}`),
          method: 'get',
        }).then(({data}) => {
          this.statusForm = data.data
          console.log(this.statusForm)
        })
      },
      //添加按钮点击事件
      addBtnHandle(){
        //如果用户没有选择三级联查,就不能进行添加操作
        if (this.optionsValue.length == 3){
          this.addOrUpdateHandle()
        }else {
          this.$message({
            message: '请先选择分类路径',
            type: 'info',
            duration: 1500,
          })
        }
      },
      //添加或修改时,将三级联查下拉框封装成对象
      createOptionsData(){
        this.options[this.optionIndex1].children[this.optionIndex2].children.forEach(item =>{
          if (item.value == this.optionsValue[2]){
            this.optionIndex3 = item.index
            return
          }
        })
        //封装三级联查数据
        this.optionsData[0].id = this.options[this.optionIndex1].value
        this.optionsData[0].name = this.options[this.optionIndex1].label

        this.optionsData[1].id = this.options[this.optionIndex1].children[this.optionIndex2].value
        this.optionsData[1].name = this.options[this.optionIndex1].children[this.optionIndex2].label

        this.optionsData[2].id = this.options[this.optionIndex1].children[this.optionIndex2].children[this.optionIndex3].value
        this.optionsData[2].name = this.options[this.optionIndex1].children[this.optionIndex2].children[this.optionIndex3].label
      },
      //三级联查下拉框选择事件
      optionsSelectHandle(visible){
        if (!visible && this.optionsValue.length == 3){
          //构造查询条件
          this.queryObj.and.must.community_category_id = this.optionsValue[0]
          this.queryObj.and.must.community_id = this.optionsValue[1]
          this.queryObj.and.must.topic_category_id = this.optionsValue[2]
          //获取数据列表
          this.getDataList()
        }
        if (visible && this.optionsValue.length == 0){
          //清空条件
          this.queryObj.and.must.community_category_id = ""
          this.queryObj.and.must.community_id = ""
          this.queryObj.and.must.topic_category_id = ""
          this.getDataList()
        }
      },
      //话题状态弹框的表单提交
      statusFormSubmit(){
        this.$http({
          url: this.$http.adornUrl('/forum/communitytopic/statusUpdate'),
          method: 'post',
          data: this.$http.adornData({
            'threadsId': this.statusForm.threadsId,
            'top': this.statusForm.top,
            'elite': this.statusForm.elite,
            'hot': this.statusForm.hot,
            'newly': this.statusForm.newly
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.statusPageVisible = false
                this.getDataList()
              }
            })
          }
        })
      },
      //关闭内容弹窗调用事件
      handleContentPageClose(){
        this.dialogContent = ''
        this.contentPageVisible = false
      }
    }
  }
</script>
<style>
  .el-tag{
    margin-bottom:5px
  }
</style>
